
<div XXXXng-controller='testController'>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><div style="width:260px"></div></td>                
                <td></td>
                <td><div style="width:260px"></div></td>                
                <td></td>
                <td><div style="width:300px"></div></td>                
                <td></td>
                <td><div style="width:260px"></div></td>                
            </tr>
            <tr>
                <td>
                    <div ng-hide="users.length " class=" smooth-panel" >No matching users  </div>
                    <div ng-hide="userDetail || !users.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : userFocus }" >    
                        <b>Users</b>    <input type=text ng-model="userFilter" placeholder="Search..."/>    
                        <div ng-repeat="e in users | filter:userFilter">        
                            <a ng-href="#/user/{{e.id}}" > &nbsp; {{ e.aid }} {{ e.mapid }} &nbsp; {{ e.XXXusername }} &nbsp;<i>{{ e.firstname }} {{ e.lastname }}</i> &nbsp;</a>    
                        </div>
                    </div>                
                    
                    <div ng-if="userDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : userEditing }">
                        <h2>User Information</h2>
                        <form name="userForm" novalidate>
                            <table>
                                <tr>
                                    <td>
                                        {{user.username}} &nbsp; <i><b>[ {{user.permission}} ]</b></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" ng-model='user.lastname'  ng-disabled="!userEditing" />
                                        <input type='text' ng-model='user.firstname' ng-disabled="!userEditing" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type='text' ng-model='user.phone1' ng-disabled="!userEditing" />
                                    </td>
                                </tr>
                            </table>
                            <button class='btn btn-default btn-xs active' ng-click="edit   ('user')" ng-disabled=" userEditing"                         >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel ('user')" ng-hide="!userEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save   ('user')" ng-hide="!userEditing || userForm.$invalid"    >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('user')" ng-disabled=" userEditing"                         >Delete</button>   

                            <br/>
                            <!--
                            <button class='btn btn-default btn-xs active' ng-click="join('team')"  >Manage a team </button>
                            -->
                            <a ng-href="#/create/team/{{user.id}}" class="btn btn-default btn-xs active">Register a team</a>

                        </form>
                    </div>
                    
                </td>
                
                <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>
                <td>
                    <div ng-hide="teams.length " class=" smooth-panel" >No matching teams    </div>
                    <div ng-hide="teamDetail || !teams.length" class=" smooth-panel" ng-class="{ 'smooth-panel-select' : teamFocus }" >    
                        <b>Teams</b>    <input ng-model="teamFilter" placeholder="Search..."/>    
                        <div ng-repeat="e in teams | filter:teamFilter ">      
                            <a ng-href="#/team/{{e.id}}" > &nbsp; {{ e.aid }} {{ e.mapid }} &nbsp; {{ e.age }} {{e.gender}}  {{ e.name }} &nbsp;</a>    
                        </div>
                    </div>     
                    
                    <div ng-show="teamDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : teamEditing }">
                        <h2>Team </h2>
                        <form name="teamForm" novalidate>
                            <table>
                                <tr><td>Name </td><td><input type='text' ng-model='team.name' ng-disabled="!teamEditing" /></td></tr>
                                <tr><td>Age group </td><td>
                                        <select ng-disabled="!teamEditing" ng-model="team.age"
                                                ng-options="a for a in ages">
                                        </select>
                                <tr><td>Gender</td><td>
                                        <select ng-disabled="!teamEditing" ng-model="team.gender"
                                                ng-options="g for g in genders">
                                        </select>
                                    </td>
                                </tr>
                                <tr><td>Class</td><td>
                                        <select ng-disabled="!teamEditing" ng-model="team.class"
                                                ng-options="c for c in classes">
                                        </select>
                                    </td>
                                </tr>
                                <tr><td>Managers </td><td>
                                        <div ng-repeat="u in users">
                                            <a ng-href="#/user/{{u.id}}" />{{ u.firstname }} {{u.lastname}}</a>
                                        </div>
                                    </td></tr>

                            </table>

                            <button class='btn btn-default btn-xs active' ng-click="edit   ('team')" ng-disabled=" teamEditing"                         >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel ('team')" ng-hide="!teamEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save   ('team')" ng-hide="!teamEditing || teamForm.$invalid"    >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('team')" ng-disabled=" teamEditing"                         >Delete</button>

                            <br/>
                            <!--
                             <button class='btn btn-default btn-xs active' ng-click="reques('team')"  >Request field </button>
                            -->
                            <a ng-href="#/create/request/{{team.id}}" ng-disabled=" teamEditing" class="btn btn-default btn-xs active">Request field</a>
                        </form>
                    </div>
            
                </td>

                <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>
                
                <td>
                    <div ng-hide="requests.length " class=" smooth-panel" >No matching field requests    </div>
                    <div ng-hide="requestDetail || !requests.length " class=" smooth-panel" ng-class="{ 'smooth-panel-select' : requestFocus }" >    
                        <b>Requests</b>    <input ng-model="requestFilter" placeholder="Search..."/>    
                        <div ng-repeat="e in requests | filter:requestFilter">        
                            <a ng-href="#/request/{{e.id}}" > &nbsp; {{ e.aid }} {{ e.mapid }} &nbsp; Request {{ e.mapid }} {{ teams[0].name }} &nbsp;</a>    
                        </div>
                    </div>
                    
                    <div ng-show="requestDetail" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : requestEditing }">
                        <h2>Field Request {{ request.mapid }}</h2>
                        <form name="requestForm" novalidate>
                                    
                            <table>
                                <tr>
                                    <td>
                                        Team <i>{{ teams[0].name }}</i><br/>
                                        <span ng-repeat="u in users"><i>&nbsp;&nbsp;&nbsp; {{ u.lastname }}, {{ u.firstname }} </i><br/></span>
                                    </td>
                                    <td>
                                        <button class='btn btn-default btn-xs active' ng-click="edit   ('request')" ng-disabled=" requestEditing"                          >Edit</button>
                                        <button class='btn btn-default btn-xs active' ng-click="cancel ('request')" ng-hide=    "!requestEditing"                          >Cancel</button>
                                        <button class='btn btn-default btn-xs active' ng-click="save   ('request')" ng-hide="!requestEditing" ng-disabled="requestForm.$invalid"  >Save</button>
                                        <br/>
                                        <button class='btn btn-default btn-xs active' ng-click="destroy('request')" ng-disabled=" requestEditing"                          >Delete</button>
                                    </td>
                                </tr>
                            </table>
                            
                            <br/>
                            
                            <fieldset>
                                <legend>
                                    Location and time
                                </legend>

                                <table>
                                    <tr>
                                        <td>
                                            Preferred
                                            <div class=display ng-hide="requestEditing">
                                                {{request.field1.name}} 
                                            </div>
                                            <div ng-hide="!requestEditing">
                                                <select class="XXXXform-control" ng-disabled="!requestEditing" ng-model="request.field1" 
                                                        ng-options="(f.name+' '+f.surface+' '+f.use+' '+f.class) for f in fieldsall" >
                                                </select>
                                            </div>

                                            <div class=display ng-hide="requestEditing">
                                                {{request.time1}}
                                            </div>
                                            <div ng-hide="!requestEditing">
                                                <select ng-disabled="!requestEditing" ng-model="request.time1" 
                                                        ng-options="t for t in request.field1.slots" >
                                                </select>
                                            </div>
                                            <input ng-show='request.time1==="Other"' type="text" ng-model="request.other1" />
                                        </td>
                                        <td>&nbsp;&nbsp;&nbsp;</td>
                                        <td>
                                            Alternate
                                            <div class=display ng-hide="requestEditing">
                                                {{request.field2.name}}
                                            </div>
                                            <div ng-hide="!requestEditing">
                                                <select ng-disabled="!requestEditing" ng-model="request.field2" 
                                                        ng-options="(f.name+' '+f.surface+' '+f.use+' '+f.class) for f in fieldsall" >
                                                </select>
                                            </div>

                                            <div class=display ng-hide="requestEditing">
                                                {{request.time2}}
                                            </div>
                                            <div ng-hide="!requestEditing">
                                                <select ng-disabled="!requestEditing" ng-model="request.time2" 
                                                        ng-options="t for t in request.field2.slots" >
                                                </select>
                                            </div>
                                            <input ng-show='request.time2==="Other"' type="text" ng-model="request.other2" />

                                        </td>
                                    </tr>
                                </table>
                            </fieldset>
                            
                            <br/>

                            <fieldset>
                                <table>
                                    <tr>
                                        <td></td>
                                        <td>Preferred &nbsp;&nbsp;</td>
                                        <td>Alternate</td>
                                    </tr>
                                    <tr ng-hide="!requestEditing" ng-repeat="d in days" >
                                        <td>{{d}} &nbsp;&nbsp;</td>
                                        <td><input type='checkbox' ng-model="request['day1' + d]" ng-disabled="!requestEditing" /></td>
                                        <td><input type='checkbox' ng-model="request['day2' + d]" ng-disabled="!requestEditing" /></td>                                        
                                    </tr>
                                    <tr ng-hide="requestEditing" ng-repeat="d in days" >
                                        <td>{{d}} &nbsp;&nbsp;</td>
                                        <td>
                                            <div class="display" ng-show="request['day1' + d]===true"  />x</div>
                                            <div class="display" ng-hide="request['day1' + d]===true"  /> &nbsp;</div>
                                        </td>
                                        <td>
                                            <div class="display" ng-show="request['day2' + d]===true"  />x</div>
                                            <div class="display" ng-hide="request['day2' + d]===true"  /> &nbsp;</div>
                                        </td>
                                    </tr>
                                   
                                </table>
                              
                            </fieldset>
                            
                            <br/>
                            
                            <fieldset>
                                <legend>
                                    Sessions per week
                                </legend>
                                <div class=display ng-hide="requestEditing">{{request.sessions}}</div>
                                <div ng-hide="!requestEditing">
                                    <input type='radio' value='1'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 1
                                     &nbsp;&nbsp;&nbsp;&nbsp;                                    
                                    <input type='radio' value='2'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 2
                                     &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type='radio' value='3'  ng-model='request.sessions' ng-disabled="!requestEditing" /> 3
                                </div>
                                    <br/>
                                    <p class=small>Rec teams may request only one practice per week</p>
                            </fieldset>

                            <br/>

                            <fieldset>
                                <legend>Purpose</legend>
                                <div class=display ng-hide="requestEditing">{{request.purpose}}</div>
                                <div ng-hide="!requestEditing">
                                     <input type='radio' value='Practice'  ng-model='request.purpose' ng-disabled="!requestEditing"  /> Practice
                                     &nbsp;&nbsp;&nbsp;&nbsp;
                                     <input type='radio' value='Scrimmage'  ng-model='request.purpose' ng-disabled="!requestEditing"  /> Scrimmage
                                     <br/>
                                     <p class=small>Field requests for tournaments, league <br/>
                                         games, and make-up games must be requested <br/>
                                         using the Home Game Field Request Form.</p>
                                </div>
                            </fieldset>

                            <br/>
                            
                            <fieldset>
                                <legend>
                                    Start date 
                                </legend>
                                <input ng-disabled="!requestEditing" type='date' ng-model='request.startdate' placeholder="yyyy-MM-dd" min="2014-01-01" max="2022-12-31"  />
                            </fieldset>

                            <br/>
                            
                            <fieldset>
                                <legend>
                                    Special instructions or comments
                                </legend>
                                <div class=display ng-hide="requestEditing">{{request.comment}}&nbsp;</div>
                                <div ng-if="requestEditing">
                                    <textarea ng-disabled="!requestEditing" rows=5 cols=40 ng-model='request.comment' ></textarea>
                                </div>
                            </fieldset>
                                
                            <br/>
                        </form>
                    </div>
                </td>

                <td><div style='border-left:#dddddd solid 1px;height:600px'> </div></td>
                
                <td>
                    <div ng-hide="fields.length " class=" smooth-panel" >No matching fields  </div>
                    <div ng-hide="fieldDetail || !fields.length " class=" smooth-panel" ng-class="{ 'smooth-panel-select' : fieldFocus }" >    
                        <b>Fields</b>    <input ng-model="fieldFilter" placeholder="Search..."/>    
                        <div ng-repeat="e in fields | filter:fieldFilter">        
                            <a ng-href="#/field/{{e.id}}" > &nbsp; {{ e.aid }} {{ e.mapid }} &nbsp; {{ e.username }} {{ e.name }} &nbsp;</a>    
                        </div>
                    </div>                
                                        
                    <div ng-show="fieldDetail === true" class='smooth-panel-select' ng-class="{ 'smooth-panel-edit' : fieldEditing }">
                        <h2>{{field.name}}</h2>
                        <form name="fieldForm" novalidate>
                            <table>
                                <tr><td>Name </td><td><input type='text' ng-model='field.name' ng-disabled="!fieldEditing" /></td></tr>
                                <tr><td>Location </td><td><input type='text' ng-model='field.location' ng-disabled="!fieldEditing" /></td></tr>
                                <tr><td>Surface </td><td><input type='text' ng-model='field.surface' ng-disabled="!fieldEditing" /></td></tr>
                                <tr><td>Use </td><td><input type='text' ng-model='field.class' ng-disabled="!fieldEditing" /></td></tr>
                                <tr><td>Slots </td><td>
                                        <div ng-repeat="s in field.slots">                                            
                                            <div ng-hide="!fieldEditing"><input type='text' ng-model='s'  /></div>                                            
                                            <div ng-hide="fieldEditing">{{s}}</div>
                                        </div>
                                    </td></tr>
                            </table>

                            <button class='btn btn-default btn-xs active' ng-click="edit   ('field')" ng-disabled=" fieldEditing"                         >Edit</button>
                            <button class='btn btn-default btn-xs active' ng-click="cancel ('field')" ng-hide="!fieldEditing"                         >Cancel</button>
                            <button class='btn btn-default btn-xs active' ng-click="save   ('field')" ng-hide="!fieldEditing || fieldForm.$invalid"   >Save</button>
                            <br/>
                            <button class='btn btn-default btn-xs active' ng-click="destroy('field')" ng-disabled=" fieldEditing"                         >Delete</button>

                        </form>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp; 
                </td>
            </tr>
        </table>
    </div>
